<style lang="less" scoped>
	.content {
		background: #ffffff;
		width: 100%;
		.tarBox {
			display: flex;
			line-height: 80rpx;
			background: #ffffff;
			padding: 16px 15px;
			box-sizing: border-box;
			margin: 0 auto;
			width: 100%;
			.top {
				font-family: PingFangSC-Semibold;
				font-size: 15px;
				color: #777777;
				letter-spacing: 0;
				line-height: 19px;
				flex: 1;
				text-align: center;
				position: relative;
				.bt {}
			}
			.hover {
				font-family: PingFangSC-Semibold;
				font-size: 18px;
				color: #333333;
				letter-spacing: 0;
				line-height: 15px;
				cursor: pointer;
				.bt {
					width: 40rpx;
					height: 6rpx;
					background: #0088FA;
					position: absolute;
					bottom: -10rpx;
					left: 33%;
					border-radius: 4rpx;
				}
			}
		}
		.line {
			height: 1rpx;
			background: #F8F9FD;
			width: 100%;
			opacity: 0.3;
		}
	}
</style>
<template>
	<div class="content">
		<div class="tarBox" :style="{width: width + '%'}">
			<div class="top" v-for="(x, index) in tabList"
			     :key="index"
			     :class="[index === current ? 'hover' : '']"
			     @tap="tarBox(index, x)"> {{x}}
				<span :style="{left: barLeft + '%'}" class="bt"></span>
			</div>
		</div>
		<div class="line" v-if="bottom"></div>
	</div>
</template>
<script type="text/javascript">
	/**
	 * Created by PhpStorm.
	 * User:  iyahe@qq.com (天明)
	 * Date: 2020/3/21
	 * Time: 21:59
	 * Description:
	 */
	export default {
		name: 'taBar',
		props : {
			tabList:{
				type: Array,
				default() {
					return []
				}
			},
			barLeft:{
				type: Number,
				default: 33
			},
			width:{
				type: Number,
				default: 100
			},
			bottom:{
				type: Boolean,
				default: false
			},
		},
		data() {
			return {
				current: 0
			}
		},
		computed: {},
		watch: {},
		components: {},
		methods: {
			tarBox (index, name) {
				this.current = index;
				this.$emit('change', {
					index: index,
					name: name
				});
			}
		},
		created() {},
		mounted() {}
	}
</script>
